<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>课程</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <link rel="stylesheet" href="/layuiadmin/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="/layuiadmin/style/admin.css" media="all">
</head>
<body>
<!-- 查询条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 5px;">
    <legend>查询条件</legend>
</fieldset>
<blockquote class="layui-elem-quote">
    <form action="" method="post" id="searchFrm" lay-filter="searchFrm" class="layui-form layui-form-pane">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" autocomplete="off" class="layui-input">
                </div>
            </div>
            <button type="button" class="layui-btn" lay-submit="" lay-filter="doSearch"><span
                    class="layui-icon layui-icon-search"></span>查询
            </button>
            <button type="reset"
                    class="layui-btn layui-btn-warm"><span
                    class="layui-icon layui-icon-refresh-1"></span>重置
            </button>
        </div>

    </form>
</blockquote>
<!-- 查询条件结束-->

<!-- 数据表格开始 -->
<div>
    <table class="layui-hide" id="courseTable" lay-filter="courseTable"></table>
    <div id="courseToolBar" style="display: none;">
        <button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span
                class="layui-icon layui-icon-add-1"></span>添加课程
        </button>

        <button type="button" lay-event="template" class="layui-btn layui-btn-sm layui-bg-blue"><span
                class="layui-icon  layui-icon-download-circle"></span>下载导入模板
        </button>
        <button type="button" class="layui-btn layui-btn-sm layui-btn-warm" id="myImport"><i class="layui-icon"></i>导入excel
        </button>
    </div>

    <div id="courseRowBar" style="display: none;">
        <button type="button" lay-event="update" class="layui-btn layui-btn-sm "><span
                class="layui-icon layui-icon-edit"></span>更新
        </button>

        <button type="button" lay-event="addGraduation" class="layui-btn layui-btn-sm  layui-btn-warm"><span
                class="layui-icon layui-icon-templeate-1"></span>毕业要求
        </button>

        <button type="button" lay-event="addCheck" class="layui-btn layui-btn-sm layui-bg-cyan "><span
                class="layui-icon layui-icon-star"></span>考核环节
        </button>

        <button type="button" lay-event="showDetails" class="layui-btn layui-btn-sm layui-bg-gray"><span
                class="layui-icon layui-icon-about"></span>详情
        </button>

        <button type="button" lay-event="delete" class="layui-btn layui-btn-sm layui-btn-danger"><span
                class="layui-icon layui-icon-delete"></span>删除
        </button>
    </div>
</div>
<!-- 数据表格结束 -->

<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 5px" id="addOrUpdateDiv">
    <form action="" method="post" class="layui-form" id="dataFrm" lay-filter="dataFrm">
        <!--隐藏ID修改用-->
        <input type="hidden" name="id">
        <div class="layui-form-item">
            <label class="layui-form-label">课程</label>
            <div class="layui-input-block">
                <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder="请输入课程"
                       class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <div class="layui-input-block" style="text-align: center;">
                <button type="button" class="layui-btn" lay-submit="" lay-filter="doSubmit"><span
                        class="layui-icon layui-icon-add-1"></span>提交
                </button>
                <button type="reset"
                        class="layui-btn layui-btn-warm"><span class="layui-icon layui-icon-refresh-1"></span>重置
                </button>
            </div>
        </div>
    </form>
</div>
<!-- 添加和修改的弹出层结束 -->

<!--毕业要求弹出层开始-->
<div id="graduationToolBar" style="display: none;">
    <button type="button" lay-event="addSelectGraduation" class="layui-btn layui-btn-sm"><span
            class="layui-icon layui-icon-add-1"></span>添加毕业要求
    </button>
</div>
<div style="display: none;padding: 5px" id="listTable">
    <table class="layui-hide" id="graduationTable" lay-filter="graduationTable"></table>
</div>

<div id="graduationRowBar" style="display: none;">
    <button type="button" lay-event="deleteGraduation" class="layui-btn layui-btn-sm layui-btn-danger"><span
            class="layui-icon layui-icon-delete"></span>删除
    </button>
</div>
<!--毕业要求弹出层结束-->

<!--添加毕业要求弹出层开始-->
<div style="display: none;padding: 5px" id="xmSelectDiv">

    <div id="graduationSelect" style="width: 300px; margin: 20px;"></div>
    <!--    <button type="button" id="graduation-getValue" class="layui-btn layui-btn-sm "></span>获取选中值</button>-->
</div>
<!--添加毕业要求弹出层结束-->

<!--详情弹出开始-->
<div style="display: none;padding: 5px" id="detailsDiv">
    <table class="layui-hide" id="detailsTable" lay-filter="detailsTable"></table>
    <table class="layui-hide" id="detailsCheckTable" lay-filter="detailsCheckTable"></table>
</div>
<!--详情弹出结束-->

<!--考核环节弹出开始-->
<div style="display: none;padding: 5px" id="checkDiv">
    <table class="layui-hide" id="checkTable" lay-filter="checkTable"></table>
</div>


<div id="toolDemo" style="display: none;">
    <button type="button" lay-event="add" class="layui-btn layui-btn-sm"><span
            class="layui-icon layui-icon-add-1"></span>添加
    </button>
</div>

<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-xs" lay-event="save">保存</a>
</script>
<!--考核环节弹出结束-->


<a hidden id="download" href="" download="">下载</a>

<script type="text/javascript" src="/layuiadmin/layui/layui.js"></script>
<script type="text/javascript">
    //表格索引
    var tableIns;

    layui.config({
        base: '/layui_exts/xmSelect/'
    }).extend({
        xmSelect: 'xm-select'//xmSelect下拉多选 扩展组件
    }).use(['jquery', 'form', 'table', 'layer', 'xmSelect', 'upload'], function () {
        var $ = layui.jquery;
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;
        var xmSelect = layui.xmSelect;
        var upload = layui.upload;

        var num = 0;//记录考核成绩比例总和 --控制不能大于100
        //自定义验证规则
        form.verify({
            title: function (value) {
                if (value.length < 2) {
                    return '至少得2个字符啊';
                }
            }
        });


        //表格加载
        tableIns = table.render({
            elem: '#courseTable'
            , url: '/courses/page'
            , toolbar: '#courseToolBar' //开启头部工具栏，并为其绑定左侧模板
            , title: '课程数据表'
            , height: 'full-280'
            , page: true
            , method: 'post'
            , cols: [
                [
                    {field: 'id', title: 'ID', align: 'center'}
                    , {field: 'name', title: '课程名称', align: 'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#courseRowBar', align: 'center'}
                ]
            ], done: function (res, curr, count) { //处理删除某一页只有一条数据 ->往前翻页
                if (res.data.length == 0 && curr != 1) {
                    tableIns.reload({
                        page: {
                            curr: (curr - 1)
                        }
                    });
                }
            }
        });
        //条件查询监听
        form.on("submit(doSearch)", function (data) {
            tableIns.reload({
                where: data.field,
                page: {
                    curr: 1
                }
            });
            return false;
        });

        //监听工具条的事件
        table.on("toolbar(courseTable)", function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddLayer();
                    break;
                case 'template':
                    var link = document.getElementById('download');
                    $(link).attr("href", "/Course.xlsx");
                    $(link).attr("download", "课程导入模板");
                    link.click();
                    break;
            }
        });


        //监听行工具条的事件
        table.on("tool(courseTable)", function (obj) {
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'update':
                    openUpdateCourseLayer(data);
                    break;
                case 'delete':
                    deleteCourse(data);
                    break;
                case 'addGraduation':
                    addGraduation(data);
                    break;

                case 'addCheck':
                    addCheck(data);
                    break;
                case 'showDetails':
                    showDetails(data);
                    break;
            }
        });

        //监听行双击事件（单击事件为：row）
        table.on('rowDouble(courseTable)', function (obj) {
            var data = obj.data;
            //查看详情
            showDetails(data);
        });

        //弹出层索引
        var layerIndex;
        var url;


        //打开添加的弹出层
        function openAddLayer() {
            layerIndex = layer.open({
                type: 1,
                content: $("#addOrUpdateDiv"),
                area: ['500px', '300px'],
                maxmin: true,
                shadeClose: true,
                title: '添加课程',
                success: function () {
                    $("#dataFrm")[0].reset();
                    url = "/courses";
                }
            });
        }

        //导入
        upload.render({
            elem: '#myImport',
            url: '/courses/import',
            accept: 'file', //文件
            field: 'file',//设定文件域的字段名
            acceptMime: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel,application/vnd.ms-excel.sheet.macroEnabled.12',//文件窗口默认显示 xlsx|xls|xlsm 的文件
            exts: 'xlsx|xls|xlsm', //限制后缀名
            done: function (res) {
                layer.msg(res.msg)
                tableIns.reload();
            },
            error: function () {
                layer.msg('导入失败');
            }
        });


        //打开修改的弹出层
        function openUpdateCourseLayer(data) {
            layerIndex = layer.open({
                type: 1,
                content: $("#addOrUpdateDiv"),
                area: ['500px', '300px'],
                maxmin: true,
                shadeClose: true,
                title: '修改课程',
                success: function () {
                    $("#dataFrm")[0].reset();
                    //装载新的数据
                    form.val("dataFrm", data);
                    url = "/courses/update";
                }
            });
        }

        //监听提交  添加/修改
        form.on("submit(doSubmit)", function (data) {
            $.post(url, data.field, function (res) {
                if (res.code == 0) {
                    tableIns.reload();
                }
                layer.msg(res.msg);
                layer.close(layerIndex);
            });
            return false;
        });

        //删除
        function deleteCourse(data) {
            layer.confirm('你确定要删除【' + data.id + ':' + data.name + '】这条数据吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    var url = "/courses/" + data.id;
                    $.ajax({
                        type: "delete",
                        url: url,
                        data: null,
                        dataType: "json",
                        async: false,
                        success: function (res) {
                            if (res.code == 0) {
                                tableIns.reload();
                            }
                            layer.msg(res.msg);
                        }
                    });
                    layer.close(index);
                }
            );
        }


        //打开详情弹窗
        function showDetails(data) {
            layerIndex = layer.open({
                type: 1,
                content: $("#detailsDiv"),
                area: ['1020px', '600px'],
                maxmin: true,
                shadeClose: true,
                title: '【' + data.name + '】',
                btn: ['<span class=layui-icon>&#x1006;关闭</span>'],
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                },
                btnAlign: 'c',
                success: function () {
                    $.get("/courses/findDetails/" + data.id, function (res) {
                        tableDetailsIns.reload({data: res.data})
                    });

                    $.get("/courses/findDetailsCheck/" + data.id, function (res) {
                        tableDetailsCheckIns.reload({data: res.data})
                    });
                }
            });

        }


        var courseId;

        //打开毕业要求弹窗
        function addGraduation(data) {
            layerIndex = layer.open({
                type: 1,
                content: $("#listTable"),
                area: ['1020px', '600px'],
                maxmin: true,
                shadeClose: true,
                title: '【' + data.name + '】',
                btn: ['<span class=layui-icon>&#x1006;关闭</span>'],

                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                },
                btnAlign: 'c',
                success: function () {
                    // 记录课程id 删除与毕业关联关系时  需要
                    courseId = data.id;
                    $.get("/courses/findGraduation/" + courseId, function (res) {
                        tableListIns.reload({data: res.data})
                    });
                }
            });
        }

        //打开添加考核环节弹出层
        function addCheck(data) {
            layerIndex = layer.open({
                type: 1,
                content: $("#checkDiv"),
                area: ['1020px', '600px'],
                maxmin: true,
                shadeClose: true,
                title: '【' + data.name + '】:<span style="color: #eb7350">最多添加五行</span>',
                btn: ['<span class=layui-icon>&#x1006;关闭</span>'],
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                },
                btnAlign: 'c',
                success: function () {
                    num = 0;
                    courseId = data.id;
                    $.get("/courses/findCheck/" + courseId, function (res) {
                        checkTableIns.reload({data: res.data})
                    });
                }
            });
        }


        //毕业要求从表加载
        var tableListIns = table.render({
            elem: '#graduationTable'
            , data: []
            , toolbar: '#graduationToolBar' //开启头部工具栏，并为其绑定左侧模板
            , title: '毕业要求数据表'
            , method: 'post'
            , cols: [
                [
                    {field: 'id', title: 'ID', align: 'center'}
                    , {field: 'content', title: '毕业要求', align: 'center'}
                    , {field: 'power', title: '权值', align: 'center'}
                    , {fixed: 'right', title: '操作', toolbar: '#graduationRowBar', align: 'center'}
                ]
            ]
        });


        //详情数据表
        var tableDetailsIns = table.render({
            elem: '#detailsTable'
            , data: []
            , title: '毕业要求详情数据表'
            , method: 'post'
            , cols: [
                [
                    , {field: 'content', title: '支撑毕业要求', align: 'center'}
                    , {field: 'name', title: '课程', align: 'center'}
                    , {field: 'power', title: '权值', align: 'center'}
                ]
            ]
        });

        //详情数据表
        var tableDetailsCheckIns = table.render({
            elem: '#detailsCheckTable'
            , data: []
            , title: '考核环节详情数据表'
            , method: 'post'
            , cols: [
                [
                    , {field: 'checkName', title: '考核环节名称', align: 'center'}
                    , {field: 'name', title: '课程', align: 'center'}
                    , {field: 'ratio', title: '占总成绩比例', align: 'center'}
                ]
            ]
        });

        //监听行工具条的事件
        table.on("tool(graduationTable)", function (obj) {
            var data = obj.data; //获得当前行数据
            switch (obj.event) {
                case 'deleteGraduation':
                    deleteGraduation(data);
                    break;
            }
        })


        // 删除毕业要求 关联关系
        function deleteGraduation(data) {
            layer.confirm('你确定要删除【' + data.id + ':' + data.content + '】这条数据吗?', {
                    icon: 3,
                    title: '提示'
                }, function (index) {
                    var param = {"graduationId": data.id, "courseId": courseId};
                    var url = "/courses/deleteGraduation";
                    $.ajax({
                        type: "delete",
                        url: url,
                        data: param,
                        dataType: "json",
                        async: false,
                        success: function (res) {
                            if (res.code == 0) {
                                $.get("/courses/findGraduation/" + courseId, function (res) {
                                    tableListIns.reload({data: res.data})
                                });
                            }
                            layer.msg(res.msg);
                        }
                    });
                    layer.close(index);
                }
            );
        }

        //监听工具条的事件
        table.on("toolbar(graduationTable)", function (obj) {
            switch (obj.event) {
                case 'addSelectGraduation':
                    addSelectGraduation();
                    break;
            }
        });


        var graduationSelect;


        //打开 添加 毕业要求 弹出层
        function addSelectGraduation() {
            layerIndex = layer.open({
                type: 1,
                content: $("#xmSelectDiv"),
                area: ['350px', '450px'],
                maxmin: true,
                shadeClose: true,
                title: '添加毕业要求',
                btn: ['<span class=layui-icon>&#xe605;确认</span>', '<span class=layui-icon>&#x1006;关闭窗口</span>'],
                yes: function (index, layero) {
                    //获取选中值
                    var selectArr = graduationSelect.getValue();
                    //得到id集合
                    var param = "";
                    $.each(selectArr, function (index, item) {
                        if (index == 0) {
                            param += "ids=" + item.value;
                        } else {
                            param += "&ids=" + item.value;
                        }
                    });
                    param += "&courseId=" + courseId;
                    $.ajax({
                        type: "get",
                        url: "/courses/addSelectArr",
                        data: param,
                        dataType: "json",
                        async: false,
                        success: function (res) {
                            layer.msg(res.msg);
                            if (res.code == 0) {
                                //刷新表格
                                $.get("/courses/findGraduation/" + courseId, function (res) {
                                    tableListIns.reload({data: res.data})
                                });
                            }
                        }
                    });
                    layer.close(index);
                },
                btn2: function (index, layero) {
                    //return false 开启该代码可禁止点击该按钮关闭
                },
                btnAlign: 'c',
                success: function () {
                    //查询未选择的毕业要求
                    //分装为 {name-->content , value-->id}
                    $.get("/courses/graduationSelect/" + courseId, function (res) {
                        if (res.code == 0) {
                            //渲染多选
                            graduationSelect = xmSelect.render({
                                el: '#graduationSelect',
                                filterable: true,//开启搜索
                                data: res.data
                            })
                        }
                    })
                }
            });
        }


        //考核环节 表格加载
        var checkTableIns = table.render({
            elem: '#checkTable'
            , id: "checkTable"
            , data: []
            , toolbar: '#toolDemo'
            , title: '考核环节数据表'
            , method: 'post'
            , cols: [
                [{field: 'name', title: '考核环节名称', align: 'center', edit: true}
                    , {field: 'ratio', title: '占总成绩比例', align: 'center', edit: true}
                    , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 180}
                ]
            ]
        });


        var line = 0;
        //考核环节 监听 添加行
        table.on("toolbar(checkTable)", function (obj) {
            switch (obj.event) {
                case 'add':
                    var oldData = table.cache["checkTable"];
                    $.each(oldData, function (index, item) {
                        num += item.ratio;
                    });
                    // if (num < 100) {
                    var newRow = {name: '', ratio: 0, courseId: courseId};
                    oldData.push(newRow);
                    checkTableIns.reload({
                        data: oldData
                    });
                    // } else {
                    //     layer.alert("【占总成绩比例和】超过了100")
                    // }
                    break;
            }
            return false;
        });

        //监听  考核环节   操作
        table.on('tool(checkTable)', function (obj) {
            var data = obj.data, event = obj.event, tr = obj.tr; //获得当前行 tr 的DOM对象;
            switch (event) {
                case "del":
                    layer.confirm('真的删除行么？', function (index) {
                        obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
                        if (undefined != data.id) {
                            //数据库真实存在的数据 做 真实删除
                            var url = "/checks/" + data.id;
                            $.ajax({
                                type: "delete",
                                url: url,
                                data: null,
                                dataType: "json",
                                async: false,
                                success: function (res) {
                                    layer.msg(res.msg);
                                }
                            });
                        }
                        layer.close(index);

                    });
                    break;

                case "save":
                    if ('' == data.name) {
                        layer.alert("考核环节名称不能为空")
                    }
                    /* else if (num + parseInt(data.ratio) > 100) {
                         layer.alert("【占总成绩比例和】超过了100")
                     } */
                    else {
                        var url;
                        if (undefined != data.id) {
                            //更新
                            url = "/checks/update"
                        } else {
                            //创建
                            url = "/checks"
                        }
                        $.post(url, data, function (res) {
                            layer.msg(res.msg);
                        })
                    }
                    break;
            }
        });


    })
</script>


</body>
</html>